<template>
  <div class="main">
    <div class="header">
      <h1>选择你的兴趣</h1>
    </div>
    <div class="body">
      <template>
        <el-checkbox
          style="margin-bottom: 30px"
          :indeterminate="isIndeterminate"
          v-model="checkAll"
          @change="handleCheckAllChange"
          >全选</el-checkbox
        >
        <div style="margin: 15px 0"></div>
        <el-checkbox-group
          v-model="checkedCities"
          @change="handleCheckedCitiesChange"
        >
          <el-checkbox
            style="margin-bottom: 30px"
            v-for="interestChoice in cities"
            :label="interestChoice"
            :key="interestChoice"
            >{{ interestChoice }}</el-checkbox
          >
        </el-checkbox-group>
      </template>
    </div>
    <div class="footer">
      <h2 class="fl choseTip">选择完毕,开始体验</h2>
      <el-button
        class="fl button"
        type="success"
        icon="el-icon-s-promotion"
        @click="handleInterest"
        >进入网站</el-button
      >
    </div>
  </div>
</template>

<script>
const interestChoiceOptions = [
  "前端",
  "后端",
  "数据库",
  "操作系统",
  "数字图像处理",
  "数字媒体资源管理",
  "数据结构",
  "计算机组成原理",
  "食堂哪里的饭最好吃",
  "芬兰是一个地方吧",
];
import personApi from "@/api/personApi";
export default {
  data() {
    return {
      identity: 0,
      studentInfo: "",
      teacherInfo: "",
      checkAll: false,
      checkedCities: [],
      cities: interestChoiceOptions,
      isIndeterminate: true,
    };
  },
  created() {
    this.getPersonInfo();
  },
  methods: {
    handleCheckAllChange(val) {
      //val true/false
      this.checkedCities = val ? interestChoiceOptions : [];
      this.isIndeterminate = val;
    },
    handleCheckedCitiesChange(value) {
      let checkedCount = value.length;
      this.checkAll = checkedCount === this.cities.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.cities.length;
    },
    //处理信息并存储
    handleInterest() {
      var tags = "";
      for (var i = 0; i < this.checkedCities.length; i++) {
        tags += this.checkedCities[i];
        if (i < this.checkedCities.length - 1) {
          tags += ",";
        }
      }
      if (this.identity == 0) {
        this.studentInfo.tags = tags;
        this.updateStudentInfo(this.studentInfo);
      } else if (this.identity == 1) {
        this.teacherInfo.tags = tags;
        this.updateTeacherInfo(this.teacherInfo);
      }
      this.$router.push({
        name: "imgchoice",
      });
    },
    updateStudentInfo(studentInfo) {
      personApi.updateStudentInfo(studentInfo).then((response) => {});
    },
    updateTeacherInfo(teacherInfo) {
      personApi.updateTeacherInfo(teacherInfo).then((response) => {});
    },
    getPersonInfo() {
      personApi.getPersonInfo().then((response) => {
        this.identity = response.data[0].identity;
        if (this.identity == 0) {
          this.studentInfo = response.data[0];
        } else {
          this.teacherInfo = response.data[0];
        }
      });
    },
  },
};
</script>

<style scoped>
.main {
  height: 600px;
  width: 80%;
  border-radius: 5px;
  margin: 50px auto;
  background-color: white;
  box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
}
.header {
  height: 10%;
  padding: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.body {
  height: 65%;
  padding: 50px;
  /* background-color: pink; */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.footer {
  height: 15%;
  padding: 20px;
}
.choseTip {
  line-height: 40px;
  margin-right: 30px;
}
.button {
}
</style>
